<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	  <!-- jquery -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    
<style> 
.box{
	width: 300px;
    height: 500px;
  /* width: 100%;
   height: 100%;*/
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.unit{

background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
display: none;
border-radius:10px ;
transition: all 1s;
}

.active{
	    display: block;
    background: goldenrod;
    position: absolute;
    top: 50px;
    /* left: 60px; */
    /* right: 60px; */
    bottom: 20px;
    width: 70%;
    left: 15%;
}
.left{
	    display: block;
    background: red;
    position: absolute;
    top: 50px;
    /* left: 0px; */
    /* right: 268px; */
    bottom: 40px;
    width: 70%;
    right: 90%;
}
.right{
	display: block;
    background: green;
    position: absolute;
    right: 88%;
    left: 90%;
    right: 60px;
    bottom: 40px;
    width: 70%;
    top: 50px;
}
.ul{
	position: absolute;
	bottom: 10px;
	left: 20%;
	
}
.ul .li{
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: red;
	float: left;
	margin-left:20px;
	    cursor: pointer;
}

/*div:hover
{
width:300px;
}*/
</style>
</head>
<body>

<div class="box">
	<div class="test">
		<div class="unit left">111</div>
		<div class="unit active">222</div>
		<div class="unit right">333</div>
		<div class="unit ">444</div>
		<div class="unit">555</div>
	</div>
	<div class="ul">
		<div class="li" id="left">11</div>
		<div class="li" id="right">22</div>
		<div class="li">33</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		
		 $("#left").click(function(){
		 	var active = $(".unit.active");
	   		var pre = $('.unit.active').prev();
	   		var clazz = pre.attr("class")
	   		console.log(pre)
	   		console.log(clazz)
	  		if(pre && clazz && clazz.indexOf("unit")>=0){
//	  			$('.unit.active').removeClass("active").addClass("right");
//	  			$('.unit.left').removeClass("left").addClass("active").prev().addClass("left");
	  			active.next().removeClass("right");
	  			active.removeClass("active").addClass("right");
	  			active.prev().removeClass("left").addClass("active");
	  			active.prev().prev().addClass("left");
	  			
	  			
	  		}
	  	});
	  	
	  	
	  	$("#right").click(function(){
	  		var active = $('.unit.active');
	  	 	var next = $('.unit.active').next();
	  	 	var clazz = next.attr("class");
	  	 	console.log(active.text())
	  	 	if (next && clazz && clazz.indexOf("unit")>=0) {
	  	 		active.prev().removeClass("left");
	  	 		active.removeClass("active").addClass("left");
	  	 		active.next().removeClass("right").addClass("active");
	  	 		active.next().next().addClass("right");
	  	 	} 
	  	})
	
		
		
	});
	
</script>

</body>
</html>